import { computed, useSignal } from "@preact/signals";
import { IS_BROWSER } from "$fresh/runtime.ts";
import { useEffect } from "preact/hooks";
import { changeTheme } from "~/tools/theme.ts";
import { JSX } from "preact/jsx-runtime";
interface ThemeTriggerProps extends JSX.HTMLAttributes<HTMLButtonElement> {
}
export default (p: ThemeTriggerProps) => {
  const { class: CO, className: CN } = p;
  const computedClass =
    `text-gray-500 size-6 text-center dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg ${
      CO ?? ""
    } ${CN ?? ""}`;
  const isDark = useSignal(
    IS_BROWSER
      ? localStorage.getItem("color-theme") === "dark" ||
        (!("color-theme" in localStorage) &&
          globalThis.matchMedia("(prefers-color-scheme: dark)").matches)
      : void 0,
  );

  useEffect(() => {
    changeTheme(isDark.value);
  }, [isDark.value]);
  const triggerIcon = computed(() => {
    if (typeof isDark.value !== "undefined") {
      return isDark.value
        ? (
          <svg
            id="theme-toggle-light-icon"
            class="size-6"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
              fill-rule="evenodd"
              clip-rule="evenodd"
            >
            </path>
          </svg>
        )
        : (
          <svg
            id="theme-toggle-dark-icon"
            class="size-6"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z">
            </path>
          </svg>
        );
    }
    return null;
  });
  return (
    <button
      id="theme-toggle"
      type="button"
      onClick={() => isDark.value = !isDark.value}
      class={computedClass}
    >
      {triggerIcon}
    </button>
  );
};
